<template>
  <el-dialog
    v-if="openDialog"
    :title="title"
    v-model="openDialog"
    width="30%"
    @close="onClose"
    append-to-body
    :close-on-click-modal="false"
    :close-on-press-escape="false"
  >
    <el-form ref="formRefs" :model="form" label-width="85px" :rules="rules">
      <el-form-item label="系统编号:" prop="sysNumber">
        <el-input
          style="width: 300px"
          v-model="form.sysNumber"
          placeholder="请输入"
        ></el-input>
      </el-form-item>
      <el-form-item label="组件别名:" prop="comName">
        <el-input
          style="width: 300px"
          v-model="form.comName"
          placeholder="请输入"
        ></el-input>
      </el-form-item>
    </el-form>
    <template #footer class="dialog-footer">
      <el-button @click="onClose">取 消</el-button>
      <el-button type="primary" @click="isOk">确 定</el-button>
    </template>
  </el-dialog>
</template>

<script setup name="serveSystem">
import { toRefs, watch, ref } from 'vue';
const props = defineProps({
  data: {
    type: Object,
    default: () => {},
  },
  open: {
    type: Boolean,
    default: false,
  },
});
const { data, open } = toRefs(props);
let title = ref('');
let openDialog = ref(false);
const formRefs = ref(null);

const serveSystem = reactive({
  form: {},
  rules: {
    sysNumber: {
      required: true,
      message: '请输入系统编号',
      tirgger: 'blur',
    },
  },
});
const { form, rules } = toRefs(serveSystem);
const emit = defineEmits(['onClose', 'getData']);
watch(
  data,
  (val) => {
    title.value = val.comName ? val.comName : val.comType;
  },
  { deep: true, immediate: true },
);
watch(open, (val) => {
  if (val) {
    form.value = JSON.parse(JSON.stringify(data.value));
    let comName = form.value.comName ? form.value.comName : form.value.comType;
    form.value.comName = comName;
  }
  openDialog.value = val;
});
const onClose = () => {
  emit('onClose');
};
const isOk = () => {
  formRefs.value.validate((valid) => {
    if (valid) {
      form.value.comState = 1;
      emit('onClose');
      emit('getData', { ...form.value });
    }
  });
};
</script>

<style lang="scss" scoped>
::v-deep {
  .el-form-item.foldLabel .el-form-item__label {
    white-space: pre-line; /*换行显示*/
    height: 32px; /*设置lable高度，与input高度一样*/
    line-height: 16px !important; /*设置行高为label高度的一半（有n行就是label高度的1/n）*/
  }
}
</style>
